const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 创建一个插件实例对象
const htmlPlugin = new HtmlWebpackPlugin({
  template: path.join(__dirname, './src/index.html'), // 源文件
  filename: 'index.html' // 生成的内存中首页名称
})

// webpack默认只能打包处理.js后缀名类型文件，像.png,.vue无法主动处理，所以需要配置第三方loader
module.exports = {
  mode: 'development', // development/production
  // 在webpack4.x 中，约定优先配置， 默认打包入口路径为src/index.js

  plugins: [
      htmlPlugin
  ],
  module: { // 所有第三方模块匹配规则
    rules: [
      {test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/}, // 不要忘记排除项
      // 在css-loader之后，通过? 追加参数
      // 其中一个固定参数modules，表示为普通css样式表启用模块化
      {test: /\.scss$/, use: [
          {loader: 'style-loader'},
          {
            // css-loader 3.x 后， localIdentName 放到modules里了
            loader: 'css-loader',
            options: {
            modules:{
                // 指定生成类名的格式
                localIdentName:"[path][name]-[local]-[hash:5]"
              }
            }
          },
          {loader: 'sass-loader'}
        ]}, // 打包处理scss，执行时倒序处理
      {test: /\.ttf|woff|woff2|eot|svg$/, use: 'url-loader'}, // 打包处理字体文件
      {test: /\.css$/, use: ['style-loader', 'css-loader']} // 打包css文件的loader
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json'], // 表示import时可以省略的文件后缀名
    alias: {
      '@': path.join(__dirname, './src') // 配置别名，@ 在项目中表示 src
    }
  }
}
